<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maxmum-scale=1.0,minimum-scale=1.0,user-scable=0">
    <title>黑马面面</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
</head>

<body>
    <script src="./js/index.js"></script>
    <script src="./js/swiper.min.js"></script>

    <header>
        <h1>黑马面面</h1>
        <div class="top_right">
            <img src="./images/top.png" alt="">
        </div>
    </header>
    <div class="banner">
        <ul>
            <li><a href="#"><img src="./images/组 22.png" alt=""><span>HR面试</span></a></li>
            <li><a href="#"><img src="./images/笔.png" alt=""><span>笔试</span></a></li>
            <li><a href="#"><img src="./images/组 24.png" alt=""><span>技术面试</span></a></li>
            <li><a href="#"><img src="./images/组 26.png" alt=""><span>模拟面试</span></a></li>
            <li><a href="#"><img src="./images/组 25.png" alt=""><span>面试技巧</span></a></li>
            <li><a href="#"><img src="./images/组 23.png" alt=""><span>薪酬查询</span></a></li>
        </ul>
        <div class="block_img">
            <img src="./images/组 21.png" alt="">
        </div>
        <div class="inter"></div>
    </div>
    <div class="course_1">
        <div class="course_head">
            <a href="#" class="more">更多>></a>
            <h4>就业指导</h4>
        </div>
        <div class="get_job_ifo">
            <!-- Swiper -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <a href="#">
                            <img src="./upload/one.webp" alt="">
                            <p>五元加一元</p>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#">
                            <img src="./upload/two.webp" alt="">
                            <p>刘昊然</p>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#">
                            <img src="./upload/three.webp" alt="">
                            <p>刘源</p>
                        </a>
                    </div>
                </div>
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
        <div class="inter"></div>
    </div>
    <div class="course_2">
        <div class="course_head">
            <a href="#" class="more">更多>></a>
            <h4>充电学习</h4>
        </div>
        <div class="get_study_ifo">
            <!-- Swiper -->
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="./upload/1.webp" alt="">
                        <p class="txt_top">思维攻略金字塔思维提升写作能力</p>
                        <p class="txt_foot"><i>125</i>人学习</p>
                    </div>
                    <div class="swiper-slide">
                        <img src="./upload/2.webp" alt="">
                        <p class="txt_top">思维攻略金字塔思维提升写作能力</p>
                        <p class="txt_foot"><i>125</i>人学习</p>
                    </div>
                    <div class="swiper-slide">
                        <img src="./upload/3.webp" alt="">
                        <p class="txt_top">思维攻略金字塔思维提升写作能力</p>
                        <p class="txt_foot"><i>125</i>人学习</p>
                    </div>
                    <div class="swiper-slide">
                        <img src="./upload/4.webp" alt="">
                        <p class="txt_top">思维攻略金字塔思维提升写作能力</p>
                        <p class="txt_foot"><i>125</i>人学习</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="inter"></div>
    </div>
    <footer>
        <ul>
            <li><a href="#"> <img src="./images/首页.png" alt=""><span class="blue">首页</span></a></li>
            <li><a href="#"> <img src="./images/专项检查.png" alt=""><span>技术面试</span></a></li>
            <li><a href="#"> <img src="./images/面试评价.png" alt=""><span>模拟面试</span></a></li>
            <li><a href="#"> <img src="./images/个人中心.png" alt=""><span>我的主页</span></a></li>
        </ul>
    </footer>
    <script>
        //立即执行函数
        (function () {
            var swiper = new Swiper('.swiper-container', {
                slidesPerView: 2.5,
                spaceBetween: 0,
                centeredSlides: true,
                loop: true,
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            });
        }
        )();
        (function () {
            var swiper = new Swiper(".mySwiper", {
                slidesPerView: 2.3,
                spaceBetween: 10,
            });
        })()
    </script>
</body>

</html>